<template>
  <!-- 正态分布图 -->
  <div>
    <Splitpanes horizontal>
      <Pane size="45">
        <el-scrollbar style="height: 100%; width: 100%">
          <div id="norDistchart">
            <div ref="piechart" id="ND-chartMain" :style="{
                width: '100%',
                height: '500px'
              }" v-show="chartData" v-loading="loading"></div>
          </div>
        </el-scrollbar>
      </Pane>
      <Pane size="55"> </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
import { Ref, ref, defineExpose, reactive, getCurrentInstance, onMounted } from 'vue';
import { ECharts, EChartsOption, init } from 'echarts';
import { formatDateTime } from '@/utils/common';

defineExpose({
  getEchartData
});

let { proxy }: any = getCurrentInstance();
const piechart: Ref<HTMLElement | null> = ref(null);
const chartHeight = ref('');
const resultForm = reactive({
  rptGroupId: null, //报告单元id
  rptGroupName: '',
  // selectWorkTeam: '', //选中的子工作组id
  insId: null, //仪器
  insName: '',
  insAnsId: null, //仪器项目
  qcItemId: null, //项目
  itemDictId: null,
  ansName: '',
  iqcMaterialIds: [],
  QCDateS: null, //开始时间
  QCDateE: null, //结束时间
  ccv: null
});
const chartData = reactive({
  group: []
});

// 方法声明区

function getEchartData(iqcResultForm: any, height: any) {
  chartHeight.value = height;
  Object.assign(resultForm, iqcResultForm);
  if (resultForm.iqcMaterialIds.length === 0) {
    Object.assign(chartData, {});
    clearCanvas();
    return;
  }

  // this.loading = true;
  let url = '/api/qc/chart/getNormalDistributionData';
  let obj = {
    itemDictId: resultForm.itemDictId,
    QcMaterialIds: resultForm.iqcMaterialIds,
    QCDateS: resultForm.QCDateS,
    QCDateE: resultForm.QCDateE
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      if (res.data && res.data.groups && res.data.groups.length > 0) {
        Object.assign(chartData, res.data);
        initChart(chartData);
      } else {
        Object.assign(chartData, {});
        clearCanvas();
      }
    })
    .catch((err) => {
      proxy.$alert(err, '提示');
    });
}

// 清除画布
function clearCanvas() {
  const myChart = init(piechart.value as HTMLElement);
  myChart.clear();
}
function initChart(val) {
  // 图表宽度自适应
  const chartBox = document.getElementById('norDistchart');
  const chartDom = document.getElementById('ND-chartMain');
  //图表宽高计算
  // this.chartssize(chartBox, chartDom);
  // const myChart = echarts.init(chartDom);
  const myChart = init(piechart.value as HTMLElement);
  // this.chart = myChart;

  const xAxisData = [];
  const barData = []; //柱状图数据
  const normDistData = []; //折线图数据
  const normDistData1 = []; //折线图数据

  val.groups.forEach((item) => {
    xAxisData.push(item.n);
    barData.push({
      max: item.max,
      min: item.min,
      value: item.count
    });
    normDistData1.push(item.normDist);
  });
  val.normDists.forEach((item) => {
    normDistData.push([item.n, item.value]);
  });
  const option = {
    title: {
      // text: '',
    },
    legend: {
      type: 'scroll'
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        // type: 'line',//指示器
      },
      confine: true, //是否将 tooltip 框限制在图表的区域内
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
      borderRadius: 5,
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
      padding: [5, 10],
      textStyle: {
        color: '#333'
      },
      formatter: proxy.formatter
    },
    toolbox: {
      feature: {
        saveAsImage: {
          title: '保存为图片',
          name: '正态分布图-' + formatDateTime(new Date(), 'yyyy-MM-dd'),
          type: 'png'
        }
      },
      right: 20
    },
    grid: {
      top: '50px',
      bottom: '70px',
      left: '50px',
      right: '50px'
    },
    xAxis: [
      {
        type: 'category',
        splitLine: {
          show: false
        },
        axisLabel: {
          interval: 0
        }, //强制显示所有坐标
        data: xAxisData
      },
      {
        type: 'value',
        show: false,
        max: normDistData.length
      }
    ],
    yAxis: [
      {
        type: 'value'
      },
      {
        type: 'value',
        show: false
      }
    ],

    series: [
      {
        type: 'bar',
        barWidth: '50%',
        data: barData,
        color: '#5470c6',
        xAxisIndex: 0,
        yAxisIndex: 0
      },
      {
        type: 'line',
        smooth: 0.4,
        symbol: 'circle',
        symbolSize: 1,
        color: 'red',
        data: normDistData,
        xAxisIndex: 1,
        yAxisIndex: 1
      }
    ]
  };

  myChart.setOption(option, true); //第二个参数 true 用来清除上次数据
}
</script>
<style lang="scss" scoped>
#iqcNorDistChart {
  height: 100%;
}
</style>
<style lang="scss">
#norDistchart {
  width: 100%;
  height: auto;
}
.iqcOutControlChart {
  .el-drawer__body {
    .iqcOutControl {
      width: 800px;
      margin: 0 auto;
    }
  }
}
</style>
